<template>
    <div>
        <div class="img-item">
            <div v-for="li in list" class="demo-upload-list">
                <img :src="li.imageUrl">
                <div class="demo-upload-list-cover">
                    <Icon type="ios-trash-outline" @click.native="handleRemove(li.id)"></Icon>
                </div>
            </div>
        </div>
        <!--<up-load-file :imgUrl="imageUrl" :imgLength="1" @getImgUrl="getImgUrl"></up-load-file>-->
        <!--<Button type="primary" @click="handleSubmit()" style="margin:20px 50%">提交</Button>-->
        <Upload :action="uploadUrl"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :headers="tokenData"
                type="drag">
             <Button icon="ios-cloud-upload-outline" @click="handleSubmit()">上传图片</Button>
        </Upload>
    </div>
</template>
<script>
    import upLoadFile from '../../components/upLoadFile.vue'
    import address from '../../components/address.vue'
    import API from '../../config/api'
    import qs from 'qs'
    export default {
        data(){
            return{
                imageId: '', //主图id(多个使用","隔开)
                temImage:[],
                list: [],
                type: 5,
                imageUrl: '',
                id: '',
                uploadUrl: process.env.BASE_URL + API.UPLOAD_FILE,
                tokenData: {
                    token: this.$store.state.userData.sessionId
                }
            }
        },
        created(){
            this.getImages()
        },
        methods:{
            handleSuccess(res, file) {
                // 因为上传过程为实例，这里模拟添加 url
                if (res.code == 200){
                    file.url = process.env.BASE_URL+'/' + res.data.path;
                    file.name = res.data.name;
                    file.id = res.data.id;
                    this.addImage(file)
                }
            },
            handleSubmit(){
                this.addImage()
            },
            handleRemove(id){
                let data = {id: id};
                this.axios.post(API.DELETE_ARTICLE, qs.stringify(data)).then(res=>{
                    let netData = res.data;
                    if (netData.code == 200){
                        this.$Message.info('删除成功');
                        this.getImages()
                    }else{
                        this.$Message.error(netData.msg)
                    }
                })
            },
            addImage(file){
                if (!file){
                    return;
                }
                let formData = new FormData();
                formData.append('type', this.type);
                formData.append('imageId', file.id);
                this.axios.post(API.ADD_ARTICLE, formData).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.$Message.info('提交成功');
                        this.getImages()
                    } else{
                        this.$Message.error(data.msg)
                    }
                })
            },
            getImages(){
                let data ={type: 5};
                this.axios.post(API.GET_ARTICLE_LIST, qs.stringify(data)).then(res=>{
                    let netData = res.data;
                    if (netData.code == 200){
                        let list = netData.data.dataList;
                        for (let index in list){
                            let tem = process.env.BASE_URL + '/evoucher/attachment/download?id='+ list[index].imageId;
                            list[index].imageUrl = tem;
                        };
                        this.list = list
                    }
                })
            }
        }
    }
</script>
<style>
    .img-item{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .img-item>div{
        width: 30%;
        height: 250px;
        margin-top: 20px;
        position: relative;
    }
    .img-item>div>img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
        text-align: center;
        line-height: 250px;
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 30px;
        cursor: pointer;
        margin: 0 2px;
    }
    .ivu-upload-list{
        display: none;
    }
    .ivu-upload{
        margin-top: 20px;
    }
</style>
